Day #20 Animated Pyramid

Sandbox This is where you play

Instructions: Create a small triangle that, once hovered over, animates into a pyramid comprised of several shapes! Hint: use CSS3 clip path ;)

top
mid
bottom

Final Result Use this for reference!

top
mid
bottom

Information About this lesson

What are we making?

Fun & fancy ways to create a CSS only animated elements, clipped within a custom shape! Woohoo!

Where can I use it?

In your websites, client projects and applications as a way to display content, projects, pricing, or other interesting ways to enhance the User Experience!

How compatible are these styles with major browsers?

Check the CSS3 styles from your stylesheet on this website. It allows you to see the compatibility of every CSS style with major browser.